<template>
    <div>
        <el-form label-position="left" class="inline-form" style="margin-left: 20px; display: flex; flex-wrap: nowrap;">
            <!-- 品牌选择文字 -->
            <el-form-item label="品牌选择" style="margin-right: 150px;display: flex;font-size: 20px">
                <el-select v-model="brandPredictDto.brandName" placeholder="请选择品牌" style="margin-right: 150px;">
                    <el-option v-for="item in brandOption" :key="item.bvalue" :label="item.blabel" :value="item.blabel">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 算法选择文字 -->
            <el-form-item label="算法选择" style="margin-right: 150px;display: flex;font-size: 20px">
                <el-select v-model="brandPredictDto.algorithmName" placeholder="请选择预测算法" style="margin-right: 150px;">
                    <el-option v-for="item in algorithmOption" :key="item.avalue" :label="item.alabel"
                        :value="item.avalue">
                    </el-option>
                </el-select>
            </el-form-item>
            <!-- 查询按钮 -->
            <el-form-item>
                <el-button type="primary" @click="GetBrandPredict">查询</el-button>
            </el-form-item>
        </el-form>
        <!-- 柱状图标题 -->
        <h3 class="chart-title">品牌销量情况</h3>
        <!-- 柱状图 -->
        <div ref="chart" :style="{ width: '100%', height: '400px' }"></div>
        <div class="card">
        <div class="indent">
            由于2012-2017年油改电产品充斥市场、2018-2020年由于新能源车的补贴大幅度下滑，
            因此市场增长几乎停滞，产业进入阵痛调整期，加速了良币驱逐劣币的进程，微型车
            市场萎靡，长续航、高端车型开始增多，因此销量低迷。2020年是新能源汽车私人消费
            开启的元年，这也是2020年后新能源车销量迅速增长的缘故，结合最近的政策《关于延续
            和优化新能源汽车车辆购置税减免政策的公告》以及新能源车不断降价的表现来看，预期销量持续向好。
        </div>
      </div>
    </div>

</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
    name: 'TaskOne',
    data() {
        return {
            chartInstance: null, // ECharts 实例
            brandPredictDto: {
                brandName: '无', // 传递品牌名为查询参数
                algorithmName: '无', // 传递算法名为查询参数
            },
            brandOption: [{
                bvalue: 'brandname1',
                blabel: '比亚迪'
            }, {
                bvalue: 'brandname2',
                blabel: '小鹏'
            }, {
                bvalue: 'brandname3',
                blabel: '蔚来'
            }],
            algorithmOption: [{
                avalue: '1',
                alabel: 'LSTM(单参数)'
            },{
                avalue: '2',
                alabel: 'GM'
            }],
            avalue: "请选择算法",
            alabel: '无',
            bvalue: '请选择品牌',
            blabel: '无',
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel: { // 添加X轴标签
                        show: true,
                        interval: 0, // 显示所有标签
                        rotate: 45, // 旋转标签以适应空间
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [
                            120,
                            150,
                            80,
                            70,
                            110,
                            130
                        ],
                        type: 'bar'
                    }
                ]
            }
        };
    },
    mounted() {
        this.GetBrandPredict();
    },
    methods: {
        GetBrandPredict() {

            console.log(this.brandPredictDto)
            axios.post('/api/task4/brandPredict', this.brandPredictDto, { // 假定的API路径
            })
                .then(response => {
                    console.log('Response:', response.data);
                    this.option.xAxis.data = response.data.data.dates
                    this.option.series[0].data = response.data.data.saleCounts
                    console.log(response.data.data.dates)
                    //console.log(response.data.data.saleCounts)
                    // 在methods的GetBrandPredict方法内部，设置完series数据之后添加以下代码
                    let seriesData = this.option.series[0].data;
                    let length = seriesData.length;

                    // 如果数据长度小于6，则不需要进行任何额外操作
                    if (length > 65) {
                        // 定义一个函数来判断是否应用红色
                        const getColor = (index) => {
                            // 如果索引在最后六个范围内，返回红色，否则返回null让ECharts使用默认或已有的颜色配置
                            return index >= length - 6 ? 'red' : 'blue';
                        };

                        // 重写或初始化series的itemStyle以应用我们的颜色逻辑
                        this.option.series[0].itemStyle = {
                            color: (params) => getColor(params.dataIndex)
                        };
                    }
                    this.chartInstance = echarts.init(this.$refs.chart); // 使用 this.$refs.charts 获取 DOM 元素  
                    this.chartInstance.setOption(this.option);
                })
                .catch(error => {
                    console.error('Error fetching brand by name:', error);
                    this.brand = null;
                });
        },
    }
};
</script>


<style>
.form-description {
    margin-right: 10px;
    /* 根据需要调整与选择器之间的间距 */
}

.chart-title {
    margin-top: 20px;
    /* 为标题与上一元素留出空间 */
    text-align: center;
    /* 标题居中，可根据需要调整 */
}
.card {
  background-color: rgb(221, 218, 218);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px;
  max-width: 80%;
  flex-grow: 1;
  /* 让卡片自动填充容器宽度 */
  /* 如果需要限制卡片最大宽度以防止过度拉伸，可以添加如下属性：
  max-width: 25%; // 或者根据实际需要设定其他百分比
  */
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0px;
  /* 向下移动10像素 */
  left: 100px;
  /* 向右移动20像素 */
  /* 保证卡片内部元素垂直排列 */
}
</style>